<template>
  <div class="pos">
    <div>
      <el-row>
          <el-col :span='7' class="order">

            <el-tabs>
                <el-tab-pane label="点餐">
                  <el-table :data="tableData" border show-summary style="width:100%">
                      <el-table-column prop="goodsName" label="商品"></el-table-column>
                      <el-table-column prop="count" label="量" width="50"></el-table-column>
                      <el-table-column prop="price" label="金额" width="70"></el-table-column>
                      <el-table-column label="操作" width="100" fixed="right">
                          <template scope="scope">
                              <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                              <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                          </template>
                      </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="挂单">
                  <el-table :data="tableData2" border show-summary style="width:100%">
                    <el-table-column prop="goodsName" label="商品"></el-table-column>
                    <el-table-column prop="count" label="量" width="50"></el-table-column>
                    <el-table-column prop="price" label="金额" width="70"></el-table-column>
                    <el-table-column label="操作" width="100" fixed="right">
                      <template scope="scope">
                        <el-button type="text" size="small">删除</el-button>
                        <el-button type="text" size="small">增加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="外卖">
                  <el-table :data="tableData3" border show-summary style="width:100%">
                    <el-table-column prop="goodsName" label="商品"></el-table-column>
                    <el-table-column prop="count" label="量" width="50"></el-table-column>
                    <el-table-column prop="price" label="金额" width="70"></el-table-column>
                    <el-table-column label="操作" width="100" fixed="right">
                      <template scope="scope">
                        <el-button type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-button type="warning">挂单</el-button>
                <el-button type="danger" @click="delAllGoods()">删除</el-button>
                <el-button type="success">结账</el-button>
            </el-tabs>
          </el-col>
        <!--商品展示-->
          <el-col :span="17" id="order-list">
              <div class="often-goods">
                  <div class="title">常用商品</div>
                  <div class="often-goods-list">
                    <ul>
                      <li v-for="item in oftenGoods">
                          <span>{{item.goodsName}}</span>
                          <span class="o-price">￥{{item.price}}元</span>
                      </li>
                    </ul>
                  </div>
              </div>
              <div class="goods-type">
                  <el-tabs>
                      <el-tab-pane label="汉堡">
                          <ul class="cookList">
                              <li v-for="item in type0Goods" @click="addOrderList(item)">
                                  <span class="foodImg"><img :src="item.goodsImg" alt="" width="100%"></span>
                                  <span class="foodName">{{item.goodsName}}</span>
                                  <span class="foodPrice">￥{{item.price}}元</span>
                              </li>
                          </ul>
                      </el-tab-pane>
                      <el-tab-pane label="小食">
                        小食
                      </el-tab-pane>
                      <el-tab-pane label="饮料">
                        饮料
                      </el-tab-pane>
                      <el-tab-pane label="套餐">
                        套餐
                      </el-tab-pane>
                  </el-tabs>
              </div>
          </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
  import axios from "axios"
  export default{
    name:'Pos',
    data(){
      return{
          tableData:[{
            goodsId:5,
            goodsName:"脆皮炸鸡腿",
            price:10,
            count:1
          },{
            goodsId:1,
            goodsName:"香辣鸡腿堡",
            price:18,
            count:1
          },{
            goodsId:4,
            goodsName:"快乐全家桶",
            price:80,
            count:1
          },{
            goodsId:6,
            goodsName:"魔法鸡块",
            price:20,
            count:1
          }],
        tableData2:[],
        tableData3:[],
        oftenGoods:[
          {
            goodsId:1,
            goodsName:"香辣鸡腿堡",
            price:18
          },{
            goodsId:2,
            goodsName:"田园鸡腿堡",
            price:15
          },{
            goodsId:3,
            goodsName:"和风汉堡",
            price:15
          },{
            goodsId:4,
            goodsName:"快乐全家桶",
            price:80
          },{
            goodsId:5,
            goodsName:"脆皮炸鸡腿",
            price:10
          },{
            goodsId:6,
            goodsName:"魔法鸡块",
            price:20
          },{
            goodsId:7,
            goodsName:"可乐大杯",
            price:10
          },{
            goodsId:8,
            goodsName:"雪顶咖啡",
            price:18
          },{
            goodsId:9,
            goodsName:"大块鸡米花",
            price:15
          },{
            goodsId:10,
            goodsName:"香脆鸡柳",
            price:17
          }
        ],
        type0Goods:[
          {
            goodsId:1,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'香辣鸡腿堡',
            price:18
          }, {
            goodsId:2,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'田园鸡腿堡',
            price:15
          }, {
            goodsId:3,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'和风汉堡',
            price:15
          }, {
            goodsId:4,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'快乐全家桶',
            price:80
          }, {
            goodsId:5,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'脆皮炸鸡腿',
            price:10
          }, {
            goodsId:6,
            goodsImg:"/static/images/hambug.jpg",
            goodsName:'魔法鸡块',
            price:20
          }
        ],
      }
    },
    created(){

    },
    mounted:function(){
      var orderHeight = document.body.clientHeight;
      document.getElementById("order-list").style.height = orderHeight + 'px';
    },
    methods:{
      //添加订单列表的方法
      addOrderList(goods){
        this.totalCount = 0;
        this.totalMoney = 0;
        let isHave = false;
        //判断是否这个商品已经存在于订单列表
        for(let i=0;i<this.tableData.length;i++){
          if(this.tableData[i].goodsId == goods.goodsId){
            isHave = true;//存在
          }
        }
        if(isHave){
          //存在就进行数量添加
          let arr = this.tableData.filter(o=>o.goodsId==goods.goodsId);
          arr[0].count++;
        }else{
          //不存在就推入数组
          let newGoods = {goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
          this.tableData.push(newGoods);
        }
        //进行数量和价格的汇总计算
        this.tableData.forEach((element)=>{
          this.totalCount += element.count;
          this.totalMoney = this.totalMoney + (element.price*element.count);
        })
      },
      //删除单个商品
      delSingleGoods(goods){
        this.tableData = this.tableData.filter(o=>o.goodsId != goods.goodsId)
      },
      //汇总数量和金额
      getAllMoney(){
        this.totalCount = 0;
        this.totalMoney = 0;
        if(this.tableData){
            this.tableData.forEach((element)=>{
              this.totalCount += element.count;
              this.totalMoney = this.totalMoney + (element.price * element.count);
            })
        }
      },
      //删除所有商品
      delAllGoods(){
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;
      }
    }
  }
</script>

<style scoped>
.order{
  width:35%;
  border-right:1px solid #d3dce6;
  border-top:1px solid #d3dce6;
}
#order-list{
  width:65%;
  border-top:1px solid #d3dce6;
}
.title{
  height:20px;
  border-bottom:1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
}
.often-goods-list{
  background-color: #eee;
  overflow: hidden;
}
.often-goods-list ul li{
  list-style: none;
  float:left;
  border:1px solid #e5e9f2;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
}
.o-price{
  color:#58b7ff;
}
.cookList{
  background-color: #eee;
  overflow: hidden;
}
.cookList li{
  list-style: none;
  width:23%;
  border: 1px solid #e5e9f2;
  height:auto;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float:left;
  margin:2px;
}
.cookList li span{
  display: block;
  float: left;
}
  .foodImg{
    width:40%;
  }
  .foodName{
    font-size:18px;
    padding-left: 10px;
    color:brown;
    width:50%;
    text-align: left;
  }
  .foodPrice{
    font-size:16px;
    padding-left:10px;
    padding-top:10px;
  }
</style>
